<template>
  <div class="accountSet">
    <el-button size="medium" type="primary" @click="showDialog(0)" v-if="btnPower.add">增加</el-button>
    <el-table class="table" :data="tableData" stripe highlight-current-row border>
      <el-table-column align="center" prop="openBank" label="开户行">
      </el-table-column>
      <el-table-column align="center" prop="openName" label="开户名">
      </el-table-column>
      <el-table-column align="center" prop="account" label="账号">
      </el-table-column>
      <el-table-column align="center" prop="status" label="状态">
        <template slot-scope="scope">
          <div>{{scope.row.status==0?'默认使用中':'禁用中'}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="operation" label="操作">
        <template slot-scope="scope">
          <span class="btn" v-show="scope.row.status==1 && btnPower.default" @click="setDefault(scope.row.id,scope.$index)">设为默认</span>
          <span class="btn" v-show="btnPower.edit" @click="showDialog(scope.row.id)">编辑</span>
          <span class="btn" v-show="btnPower.delete" @click="deleteData(scope.row.id,scope.$index)">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="accountData.id?'编辑对公帐号':'新增对公账户'" width="25%" :visible.sync="accountData.show">
      <ul class="dialog-list">
        <li class="dialog-item">
          <span>开户行：</span>
          <el-input size="small" v-model="accountData.openBank" placeholder="请输入开户行"></el-input>
        </li>
        <li class="dialog-item">
          <span>开户名：</span>
          <el-input size="small" v-model="accountData.openName" placeholder="请输入开户名"></el-input>
        </li>
        <li class="dialog-item">
          <span>开户帐号：</span>
          <el-input size="small" v-model="accountData.account" placeholder="请输入开户帐号"></el-input>
        </li>
      </ul>
      <div slot="footer">
        <el-button type="primary" @click="submit">保存</el-button>
        <el-button @click="accountData.show = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      btnPower: {},
      tableData: [],
      accountData: {
        show: false,
        id: null,
        openBank: "",
        openName: "",
        account: ""
      }
    };
  },
  mounted() {
    this.getTableData();
    this.getBtnPower();
  },
  methods: {
    async getBtnPower() {
      let { data } = await this.$post({
        api: "/getMenus"
      });
      if (data.code === 0) {
        data.data.forEach(item => {
          if (item.name = this.$route.meta.primaryTitle) {
            item.children.forEach(todo => {
              if (todo.name = this.$route.meta.title) {
                if (todo.children && todo.children.length) {
                  todo.children.forEach(btn => {
                    if (btn.name.indexOf('编辑') > -1) {
                      this.$set(this.btnPower, 'edit', true);
                    } else if (btn.name.indexOf('删除') > -1) {
                      this.$set(this.btnPower, 'delete', true);
                    } else if (btn.name.indexOf('增加') > -1) {
                      this.$set(this.btnPower, 'add', true);
                    } else if (btn.name.indexOf('设为默认') > -1) {
                      this.$set(this.btnPower, 'default', true);
                    }
                  })
                }
              }
            })
          }
        })
      } else {
        this.$message({
          type: "error",
          message: data.msg
        });
      }
    },
    async getTableData() {
      let { data } = await this.$post({
        api: "/get/getAccountPublicList"
      });
      if (data.code === 0) {
        this.tableData = data.data;
      } else {
        this.$message({
          type: "error",
          message: data.msg
        });
      }
    },
    setDefault(id, index) {
      this.$confirm("确认进行此操作吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$post({
          api: "/set/setUseAccountPublic",
          data: {
            id: id
          }
        }).then(({ data }) => {
          if (data.code === 0) {
            this.getTableData();
            this.$message({
              type: "success",
              message: data.msg
            });
          } else {
            this.$message({
              type: "error",
              message: data.msg
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消操作"
        });
      });
    },
    showDialog(id) {
      if (id) {
        this.getSingleData(id);
      } else {
        this.accountData = {
          show: true,
          id: id,
          openBank: "",
          openName: "",
          account: ""
        };
      }
    },
    async getSingleData(id) {
      let { data } = await this.$post({
        api: "/get/getOneAccountPublicDetail",
        data: {
          id: id
        }
      });
      if (data.code === 0) {
        this.accountData = {
          show: true,
          id: id,
          openBank: data.data.openBank,
          openName: data.data.openName,
          account: data.data.account
        };
      } else {
        this.$message({
          type: "error",
          message: data.msg
        });
      }
    },
    deleteData(id, index) {
      this.$confirm("确认要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$post({
          api: "/delete/deleteAccountPublic",
          data: {
            id: id
          }
        }).then(({ data }) => {
          if (data.code === 0) {
            this.tableData.splice(index, 1);
            this.$message({
              type: "success",
              message: data.msg
            });
          } else {
            this.$message({
              type: "error",
              message: data.msg
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消操作"
        });
      });
    },
    async submit() {
      if (!this.accountData.openBank) {
        this.$message({
          type: "error",
          message: "开户行不能为空"
        });
      } else if (!this.accountData.openName) {
        this.$message({
          type: "error",
          message: "开户名不能为空"
        });
      } else if (!this.accountData.account || !/^[0-9]*$/.test(this.accountData.account)) {
        this.$message({
          type: "error",
          message: "请输入正确的开户账号"
        });
      } else {
        let params = {
          account: this.accountData.account,
          openBank: this.accountData.openBank,
          openName: this.accountData.openName
        };
        let link = "";
        if (this.accountData.id) {
          params.id = this.accountData.id;
          link = "/editor/editorAccountPublic";
        } else {
          link = "/add/addAccountPublic";
        }
        let { data } = await this.$post({
          api: link,
          data: params
        });
        if (data.code === 0) {
          this.accountData.show = false;
          this.getTableData();
        } else {
          this.$message({
            type: "error",
            message: data.msg
          });
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.accountSet {
  padding: 15px;
}
.btn {
  color: #0033ff;
  margin: 0 5px;
  cursor: pointer;
}

.dialog-item {
  display: flex;
  margin-bottom: 20px;
  span {
    flex: 0 0 80px;
    width: 80px;
  }
  .el-input {
    flex: 1;
  }
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
